<template>
<div  class="content content_samll">
  <div class="mews_wrapper">
    <div  class="news-template-side">
      <h4  class="news-template-side-title">联系我们</h4>
      <ul  class="news-template-side-menus">
        <div  class="new-template-side-menu-group">
          <li  class="news-template-side-menu cursor">
            <span  class="news-template__point">
              <span  class="news-circle inline-block background-primary"></span>
            </span>
            <span  class="news-template-side-menu-title text-color-primary">联系我们</span>
          </li>
        </div>
      </ul>
    </div>
    <div class="news_content">
      <div class="contact-wrapper">
        <div class="contact-wrapper__details-group">
          <div class="contact-wrapper__half">
            <div class="new-content-title-wrapper">
              <div class="new-content-title">主办单位</div>
              <div class="new-content-line"></div>
            </div>
            <div class="contact-wrapper__details">
              <h4 class="contact-details__title">内蒙古自治区民政厅</h4>
              <ul>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">联系电话：</span>
                  <span class="contact-wrapper__value">(0471)6945525</span>
                </li>
                
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">联系传真：</span>
                  <span class="contact-wrapper__value">(0471)6945525</span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">电子邮箱：</span>
                  <span class="contact-wrapper__value"></span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">单位网址：</span>
                  <span class="contact-wrapper__value">
                    <a target="_blank" href="http://mzt.nmg.gov.cn/" style="color: rgb(0, 93, 165);">http://mzt.nmg.gov.cn/</a>
                  </span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">通讯地址：</span>
                  <span class="contact-wrapper__value">呼和浩特市新华大街63号院6号楼</span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">业务 QQ：</span>
                  <!-- <span class="contact-wrapper__value">
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=70844194&amp;site=qq&amp;menu=yes" style="color: rgb(0, 93, 165);">
                      <img src="http://wpa.qq.com/pa?p=2:2880904130:52" alt="点击这里给我发消息" title="点击这里给我发消息" align="absmiddle">70844194
                    </a>
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=5701104&amp;site=qq&amp;menu=yes" style="color: rgb(0, 93, 165);">
                      <img src="http://wpa.qq.com/pa?p=2:2880904130:52" alt="点击这里给我发消息" title="点击这里给我发消息" align="absmiddle">5701104
                    </a>
                  </span> -->
                </li>
              </ul>
            </div>
          </div>
          <div class="contact-wrapper__half">
            <div  class="new-content-title-wrapper">
              <div  class="new-content-title">承建单位</div>
              <div  class="new-content-line"></div>
            </div>
            <div class="contact-wrapper__details">
              <h4 class="contact-details__title">内蒙古自治区地图院</h4>
              <ul>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">联系电话：</span>
                  <span class="contact-wrapper__value"></span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">联系传真：</span>
                  <span class="contact-wrapper__value"></span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">电子邮箱：</span>
                  <span class="contact-wrapper__value"></span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">单位网址：</span>
                  <span class="contact-wrapper__value">
                    <a target="_blank" href="https://baike.baidu.com/item/%E5%86%85%E8%92%99%E5%8F%A4%E8%87%AA%E6%B2%BB%E5%8C%BA%E5%9C%B0%E5%9B%BE%E9%99%A2/2235640?fr=aladdin" style="color: rgb(0, 93, 165);">http://www.dituyuayuan.com/</a>
                  </span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">通讯地址：</span>
                  <span class="contact-wrapper__value">呼和浩特市新城区爱民街31号</span>
                </li>
                <li class="contact-wrapper__li">
                  <span class="contact-wrapper__label">业务 QQ：</span>
                  <!-- <span class="contact-wrapper__value">
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=573307393&amp;site=qq&amp;menu=yes" style="color: rgb(0, 93, 165);">
                      <img src="http://wpa.qq.com/pa?p=2:2880904130:52" alt="点击这里给我发消息" title="点击这里给我发消息" align="absmiddle">573307393
                    </a>
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=544588916&amp;site=qq&amp;menu=yes" style="color: rgb(0, 93, 165);">
                    <img src="http://wpa.qq.com/pa?p=2:2880904130:52" alt="点击这里给我发消息" title="点击这里给我发消息" align="absmiddle">544588916
                    </a>
                  </span> -->
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="contact-wrapper__map" id="contactmap"></div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
  export default {
    data() {
      return {
        olMap:null,
        olView:null,
        PoiSource: null,
      }
    },
    mounted() {
      this.initmap();
    },
    methods: {
      //初始化地图
      initmap() {
          let layerTDT=this.Get_TDTlayers()[0];
          layerTDT.setVisible(true);  
          this.olView=new ol.View({
              center: [12431971.984681873,4988312.46254533],//ol.proj.transform([111.676, 40.914],'EPSG:4326', 'EPSG:3857' ) ,
              zoom:13,
          })
          this.olMap=new ol.Map({
              controls:[],
              target: 'contactmap',
              maxTilesLoading:15,
              layers: [layerTDT],
              view: this.olView
          })
          //注记图层
          this.PoiSource = new ol.source.Vector({
              features:[]
          });
          let stationSourceLayer = new ol.layer.Vector({
              source: this.PoiSource,
              style: this.station_maker_style
          });
          this.olMap.addLayer(stationSourceLayer)
          this.addPoiMarker(111.668,40.824,1);
          this.addPoiMarker(111.686,40.845,2);
      },
      addPoiMarker(x, y,index)
      {
        let feature=new ol.Feature({
            geometry:new ol.geom.Point(ol.proj.transform([x, y],'EPSG:4326', 'EPSG:3857' ))
        });
        feature.setProperties({
            index:index
        },true)
        feature.setStyle(this.poi_maker_style(index))
        this.PoiSource.addFeature(feature)
      },
      poi_maker_style(index,bHover){
        let xoffset=21*(index - 1);
        let yoffset=0;
        if(bHover){
          yoffset=33*2;
        }
        return  new ol.style.Style({
          image: new ol.style.Icon({
            src: `${window.Glod.baseUrl}pics/markers.png`,
            offset:[xoffset,yoffset],
            size:[21, 33],
            imgSize:[300,300],
            scale:1
          }),
        });
      },
    },
  }
</script>

